<template>
  <div class="container">
    <div class="header" :style="{ backgroundImage: 'url(' + background + ')' }">
      <div class="header-container">
        <!--        <div class="header-icon">-->
        <!--          <van-image-->
        <!--              width="100%"-->
        <!--              height="100%"-->
        <!--              radius="10px"-->
        <!--              fit="cover"-->
        <!--              show-error-->
        <!--              src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1830914723,3154965800&fm=26&gp=0.jpg">-->
        <!--          </van-image>-->
        <!--        </div>-->

        <div class="header-info">
          <div class="header-title">{{ shopInfo.shopName }}</div>
          <div class="header-time" style="overflow: hidden">
            <van-icon name="clock" />
            <span>营业时间：早上9.00-晚上6.00</span>
          </div>
          <div class="header-address">
            <van-icon name="location" />
            <span
              >服务地址：{{
                shopInfo.shopAddress
                  ? shopInfo.shopAddress
                  : '该商家没有填写服务地址'
              }}</span
            >
          </div>

          <div style="margin-top: 13px">
            <span
              @click="callKf(shopInfo.tel)"
              style="
                background: #deb431;
                color: #151c1b;
                border-radius: 5px;
                padding: 2px 5px;
                font-size: 13px;
                display: inline-block;
              "
            >
              <van-icon name="phone" />
              <span style="padding-left: 5px">联系商家</span>
            </span>

            <span
              v-if="false"
              @click="openBaiApp()"
              style="
                background: #deb431;
                color: #151c1b;
                border-radius: 5px;
                padding: 2px 5px;
                font-size: 13px;
                margin-left: 10px;
                display: inline-block;
              "
            >
              <van-icon name="map-marked" />
              <span style="padding-left: 5px">地图导航</span>
            </span>
          </div>
        </div>
      </div>

      <div class="header-split"></div>
      <div class="header-intro">
        {{ shopInfo.intro ? '简介：' + shopInfo.intro : '暂无简介' }}
      </div>
    </div>

    <div
      v-if="shopInfo.shopPhotos && shopInfo.shopPhotos.length > 0"
      style="font-size: 16px; font-weight: bold; margin: 10px 4%"
    >
      服务设备类型
    </div>
    <div style="margin: 0 4%; margin-bottom: 5px">
      {{ shopInfo.subTitle }}
    </div>

    <!-- <div
      style="
        font-size: 16px;
        font-weight: bold;
        margin: 10px 4%;
        padding-top: 10px;
      "
    >
      门店概况
    </div> -->

    <!-- <div
      class=" "
      style="
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 4%;
      "
      v-if="shopInfo.shopPhotos && shopInfo.shopPhotos.length > 0"
    >
      <van-image
        v-for="(url, index) in shopInfo.shopPhotos"
        :key="index"
        class="item"
        fit="cover"
        radius="5px"
        :src="url"
        @click="showImage(index)"
      >
      </van-image>
    </div> -->

    <div style="height: 5px; background: #dfe4ff; margin: 10px 0"></div>

    <van-tabs v-model="active" color="#2996eb" @click="finact(active)">
      <van-tab title="店铺产品">
        <!-- 列表隐藏 -->
        <!-- <van-pull-refresh> -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            v-for="item in shopGoods"
            :key="item.id"
            @click="goToGoodsUrl(item)"
          >
            <van-card
              class="product-item"
              :price="item.retailPrice"
              :title="item.name"
              :desc="item.brief"
              :thumb="item.gallery[0]"
            />
          </van-cell>
        </van-list>
        <!-- </van-pull-refresh> -->
      </van-tab>

      <van-tab title="二手转让">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="Load"
        >
          <div
            v-for="(item, index) in list"
            :key="index"
            :title="item"
            style="background-color: white; margin-top: 15px; padding: 0 15px"
          >
            <van-row style="padding-top: 15px" @click="itemClick(item.id, 1)">
              <van-col style="position: relative">
                <img
                  :src="getSrc(item, index)"
                  style="object-fit: cover"
                  width="100px"
                  height="100px"
                />
              </van-col>
              <van-col
                style="
                  width: calc(100% - 100px);
                  height: 100px;
                  padding-left: 10px;
                  display: flex;
                  flex-direction: column;
                  position: relative;
                "
              >
                <img
                  v-if="item.isCertificate"
                  :src="logo_certificate"
                  width="40px"
                  style="position: absolute; right: -10px; top: 0px; z-index: 1"
                />
                <div style="flex: 1; display: flex">
                  <p
                    style="
                      display: inline-block;
                      color: white;
                      width: auto;
                      height: 20px;
                      padding: 2px 3px;
                      align-items: center;
                      font-size: 12px;
                      text-align: center;
                      border-radius: 4px;
                      margin-top: 5px;
                      background: rgb(128, 157, 225);
                    "
                    :style="{
                      background:
                        item.userType == '平台'
                          ? '#86d1a4'
                          : item.userType == '门店'
                          ? '#809de1'
                          : item.userType == '个人'
                          ? '#f4a97c'
                          : null,
                    }"
                  >
                    {{ item.userType == undefined ? '待审' : item.userType }}
                  </p>
                  <van-cell
                    :title="item.title"
                    label-class="item"
                    title-class="title"
                    :label="item.detail"
                  ></van-cell>
                </div>
                <div style="width: 100%">
                  <van-row
                    type="flex"
                    align="bottom"
                    style="margin-bottom: 4px"
                  >
                    <span
                      style="
                        border: 1px solid #fe815a;
                        border-radius: 4px;
                        color: #fe815a;
                        padding: 2px;
                        font-size: 10px;
                      "
                    >
                      二手
                    </span>
                    <span
                      style="color: red; margin-left: 5px"
                      :style="
                        item.price == 0 || item.price == null
                          ? 'font-size:12px;'
                          : ''
                      "
                      >￥{{
                        item.price == 0 || item.price == null
                          ? '面议'
                          : item.price
                      }}</span
                    >
                  </van-row>
                  <van-row
                    type="flex"
                    align="center"
                    justify="space-between"
                    style="height: 16px; margin-left: 1px"
                  >
                    <van-col>
                      <span class="cell-span">{{
                        getAddressByDistrictCode(item.areaCode) || '地区未知'
                      }}</span>
                    </van-col>
                    <van-col style="font-size: 12px">
                      <div style="height: 100%">
                        <span
                          class="cell-span"
                          style="float: left; line-height: 12px"
                        >
                          <van-icon
                            name="star"
                            color="#EE3F00"
                            style="float: left; font-size: 12px"
                            v-show="
                              item.newLevel >= 0 && item.newLevel < 3
                                ? true
                                : false
                            "
                          ></van-icon>
                          &#8197;{{ getChosedLevel(item.newLevel) }}
                        </span>
                      </div>
                    </van-col>
                    <van-col>
                      <span class="cell-span">{{
                        item.updateTime.substring(0, 10)
                      }}</span>
                    </van-col>
                  </van-row>
                </div>
              </van-col>
            </van-row>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="闲置出租">
        <van-list
          v-model="loadingmore"
          :finished="finishedmore"
          finished-text="没有更多了"
          @load="onLoadMore"
        >
          <div
            v-for="(item, index) in morelist"
            :key="index"
            :title="item"
            style="background-color: white; margin-top: 15px; padding: 0 15px"
          >
            <van-row style="padding-top: 15px" @click="itemClick(item.id, 2)">
              <van-col style="position: relative">
                <img
                  :src="getSrc(item, index)"
                  style="object-fit: cover"
                  width="100px"
                  height="100px"
                />
                <img
                  v-if="item.finished"
                  src="@/assets/images/finish.png"
                  style="
                    position: absolute;
                    z-index: 1;
                    width: 100%;
                    left: 50%;
                    top: 50%;
                    margin: auto;
                    transform: translate(-50%, -50%);
                  "
                />
              </van-col>
              <van-col
                style="
                  width: calc(100% - 100px);
                  height: 100px;
                  padding-left: 10px;
                  display: flex;
                  flex-direction: column;
                "
              >
                <div style="flex: 1; display: flex">
                  <p
                    style="
                      display: flex;
                      display: inline-block;
                      color: white;
                      width: auto;
                      height: 20px;
                      padding: 2px 3px;
                      align-items: center;
                      font-size: 12px;
                      text-align: center;
                      border-radius: 4px;
                      margin-top: 5px;
                    "
                    :style="{
                      background:
                        item.userType == '平台'
                          ? '#86d1a4'
                          : item.userType == '门店'
                          ? '#809de1'
                          : item.userType == '个人'
                          ? '#f4a97c'
                          : null,
                    }"
                  >
                    {{ item.userType == undefined ? '待审' : item.userType }}
                  </p>
                  <van-cell
                    :title="item.title"
                    label-class="item"
                    title-class="title"
                  ></van-cell>
                </div>
                <div style="width: 100%">
                  <van-row
                    type="flex"
                    align="bottom"
                    style="margin-bottom: 4px"
                  >
                    <span
                      style="
                        border: 1px solid #fe815a;
                        border-radius: 4px;
                        color: #fe815a;
                        padding: 2px;
                        font-size: 10px;
                      "
                    >
                      出租
                    </span>
                    <span
                      style="color: red; margin-left: 5px"
                      :style="
                        item.price == 0 || item.price == null
                          ? 'font-size:12px;'
                          : ''
                      "
                      >{{
                        item.price == 0 || item.price == null
                          ? '面议'
                          : item.price
                      }}{{
                        item.price == 0 || item.price == null
                          ? ''
                          : getChosedUnit(item.unit)
                      }}</span
                    >
                  </van-row>
                  <van-row
                    type="flex"
                    align="center"
                    justify="space-between"
                    style="height: 16px; margin-left: 1px"
                  >
                    <van-col>
                      <span class="cell-span">{{
                        getAddressByDistrictCode(item.areaCode) || '地区未知'
                      }}</span>
                    </van-col>
                    <van-col style="font-size: 12px">
                      <div style="height: 100%">
                        <van-icon
                          name="star"
                          color="#EE3F00"
                          style="float: left; font-size: 12px"
                          v-show="
                            item.newLevel >= 0 && item.newLevel < 2
                              ? true
                              : false
                          "
                        ></van-icon
                        >&#8197;
                        <span class="cell-span" style="float: left">{{
                          getChosedLevel(item.newLevel)
                        }}</span>
                      </div>
                    </van-col>
                    <van-col>
                      <span class="cell-span">{{
                        item.updateTime.substring(0, 10)
                      }}</span>
                    </van-col>
                  </van-row>
                </div>
              </van-col>
            </van-row>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>

    <!-- <van-row>
      <van-col span="24">
        <van-col span="8" class="picture"></van-col>
        <van-col span="8" class="picture"></van-col>
        <van-col span="8" class="picture"></van-col>
      </van-col>
    </van-row> -->
  </div>
</template>

<script>
import wx from 'weixin-js-sdk';
import {
  getWxConfig,
  findShopById,
  goodsListByShopId,
  authInfo,
  listRent,
  dicItems,
  listUsed,
} from '@/api/api';

import {
  Image,
  Row,
  Col,
  Rate,
  Notify,
  Tab,
  List,
  Tabs,
  Card,
  PullRefresh,
  Dialog,
  ImagePreview,
  Toast,
} from 'vant';
import areaList from '@/views/user/module-address-edit/area_all.json';
export default {
  data() {
    return {
      shopId: 0,
      areaList: areaList,
      rate: 5,
      service: ['全面', '设备维修', '设备租聘', '二手产品', '五金工具'],
      background: require('@/assets/images/shop_detail.jpg'),
      active: Number(this.$route.query.zuid),
      list: [],
      loading: false,
      loadingmore: false,
      morelist: [],
      finishedmore: false,
      finished: false,
      refreshing: false,
      setou: new Map(),
      shopInfo: {
        shopName: '',
        shopAddress: '',
        intro: '',
        mobile: '',
        shopPhotos: [],
      },
      shopGoods: [
        {
          id: 0,
          picUrl: '',
          name: '',
          retailPrice: '',
          brief: '',
        },
      ],
      mobile: '',
      userInfo: '',
      bei: [
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/a8b9myfv9aaff9vdi8ey.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/mqes4omo1web8pbr9kfg.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/gsxkzucq38dye53ktj02.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/nw6bfr5f2j0eg1frveko.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/1fsyv5k37nl0sh5t3c07.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/2ebsg1lfh8hoc0pht53w.jpg',
      ],
      images: [
        'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3238317745,514710292&fm=26&gp=0.jpg',
        'https://img.tuguaishou.com/ips_banner/21/18/7e/21187ed5012bc3f540d9afe4e0e108b0602.jpeg?auth_key=2234966400-0-0-b37855081a99817a50e2ffb08028650b',
        'http://pic2.sc.chinaz.com/Files/pic/pic9/202010/apic28331_s.jpg',
        'https://w.wallhaven.cc/full/ox/wallhaven-oxkjgm.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602588357013&di=89619391b925a91ad5227e87cdb23571&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3Dd5d6c35e6909c93d07f20effaf3cf8bb%2F35fae6cd7b899e511372b3444ca7d933c9950de5.jpg',
      ],
    };
  },
  beforeCreate() {
    //
  },
  created() {
    dicItems({
      groupId: 'RENT_USER_TYPE',
    }).then((res) => {
      res.data.data.list.forEach((e) => {
        this.setou.set(e.itemValue, e.itemName);
      });
    });

    if (this.$route.query.id == null) {
      Dialog.alert({
        title: '店铺不存在',
        message: '当前店铺不存在或者已关闭！',
      });
      // this.$router.go(-1);
    }
    this.init();
    this.shopId = this.$route.query.id;
    this.getShopInfo(this.shopId);
    this.shopGoods.length = 0;
    authInfo({}).then((res) => {
      this.userInfo = res.data.data.memberLevel;
      this.mobile = res.data.data.mobile;
    });
  },

  comments: {},
  methods: {
    itemClick(id, it) {
      if (it == 1) {
        this.$router.push(`/info/used-detail/${id}`);
        return;
      } else if (it == 2) {
        this.$router.push(`/info/rent-detail/${id}`);
        return;
      }
    },
    finact(value) {
      if (value == 0) {
        this.onLoad();
        return;
      } else if (value == 1) {
        this.Load();
        return;
      } else if (value == 2) {
        this.onLoadMore();
        return;
      }
    },
    getChosedUnit(unit_value) {
      for (let i in this.unitoptions) {
        if (unit_value == this.unitoptions[i].value) {
          return this.unitoptions[i].text;
        }
      }
    },
    // 租赁

    onLoadMore() {
      // if (this.page != 0 && this.list.length < 10) {
      //   this.page = 0;
      //   this.list = [];
      // }
      // this.page++;
      listRent({
        page: 1,
        limit: 800,
        filtername: '',
        areaCode: '',
        shopId: this.shopId,
        inClass: -1,
        newLevel: '',
        rentId: -1,
        userId: '',
        sort: 'update_time',
      })
        .then((res) => {
          res.data.data.list.forEach((item) => {
            if (this.setou.get(String(item.userType))) {
              item.userType = this.setou.get(String(item.userType));
            }

            //如果商品包含到期时间，则继续
            if (typeof item.excessTime != 'undefined') {
              //如果现在时间大于过期时间，则显示已结束图标
              if (new Date() > new Date(item.excessTime)) {
                item.finished = true;
              } else {
                item.finished = false;
              }
            } else {
              item.finished = true;
            }

            //如果商品已经下架，则显示结束
            if (item.status !== 3) {
              item.finished = true;
            }
          });
          this.morelist = [];
          this.morelist.push(...res.data.data.list);

          this.loadingmore = false;
          this.finishedmore = true;
        })
        .catch((e) => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },

    getAddressByDistrictCode(district_code) {
      let province_code = district_code.substring(0, 2) + '0000';
      let city_code = district_code.substring(0, 4) + '00';
      let province_name = areaList.province_list[province_code];
      let city_name = areaList.city_list[city_code];
      let district_name = areaList.county_list[district_code];
      return city_name;
    },
    getChosedLevel(level_value) {
      for (let i in this.leveloptions) {
        if (level_value == this.leveloptions[i].value) {
          if (level_value == -1) {
            return '新旧程度';
          } else {
            return this.leveloptions[i].text;
          }
        }
      }
    },
    // 二手
    getSrc(item, id) {
      let image = this.bei[id % 6];
      if (item.images.length != 0) {
        image = item.images[0];
      }
      return image;
    },
    Load() {
      listUsed({
        page: 1,
        limit: 800,
        filtername: '',
        areaCode: '',
        inClass: -1,
        shopId: this.shopId,
        newLevel: '',
      })
        .then((res) => {
          res.data.data.list.forEach((item) => {
            if (this.setou.get(String(item.userType))) {
              item.userType = this.setou.get(String(item.userType));
            }
            item.sellOut = false;
            if (item.isCertificate) {
              item.finished = false;
            } else {
              if (typeof item.excessTime == 'undefined') {
                item.finished = true;
              } else if (new Date() > new Date(item.excessTime)) {
                item.finished = true;
              } else {
                item.finished = false;
              }
            }

            if (item.status !== 3) {
              //如果商品已经下架，则显示结束
              item.finished = true;
              if (item.isCertificate) {
                item.sellOut = true;
              }
            }

            // console.log(
            //   item.title,
            //   '认证：' + item.isCertificate,
            //   '结束：' + item.finished,
            //   '售出：' + item.sellOut
            // );
          });
          this.list = [];
          this.list.push(...res.data.data.list);
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch((e) => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },

    init() {
      getWxConfig({
        url: location.href.split('#')[0],
      }).then((res) => {
        wx.config({
          // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          debug: false,
          // 必填，公众号的唯一标识
          appId: res.data.data.appId,
          // 必填，生成签名的时间戳
          timestamp: res.data.data.timestamp,
          // 必填，生成签名的随机串
          nonceStr: res.data.data.nonceStr,
          // 必填，签名，见附录1
          signature: res.data.data.signature,
          // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          jsApiList: ['checkJsApi', 'openLocation'],
        });
      });
      wx.error(function (res) {
        //alert('出错了：' + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
      });
      wx.ready(function () {
        wx.checkJsApi({
          jsApiList: ['openLocation'],
          success: function (res) {
            //alert('成功了：' + res.errMsg);
          },
        });
      });
    },
    openBaiApp() {
      if (this.mobile == '' || this.mobile == undefined) {
        Dialog.confirm({
          title: '系统提示',
          message: '请先登录',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(() => {
            this.$router.push({ path: '/check' });
          })
          .catch(() => {});
        return;
      }
      let latitude = parseFloat(this.shopInfo.shopLat) || 0;
      let longitude = parseFloat(this.shopInfo.shopLng) || 0;
      let name = this.shopInfo.shopName;
      let address = this.shopInfo.shopAddress;
      if (!(latitude && longitude)) {
        return;
      }
      wx.openLocation({
        latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
        longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
        name: name, // 位置名
        address: address, // 地址详情说明
        //scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: '', // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
    callKf(mobile) {
      debugger;
      if (this.mobile == '' || this.mobile == undefined) {
        Dialog.confirm({
          title: '系统提示',
          message: '请先登录',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(() => {
            this.$router.push({ path: '/check' });
          })
          .catch(() => {});
        return;
      }
      if (mobile) {
        window.location.href = 'tel:' + mobile;
      }
    },
    goToGoodsUrl(row) {
      if (row.modular == 0 || row.modular == 2) {
        this.$router.push('/items/detail/${row.id}/e');
      } else {
        this.$router.push(`/raw/material-detail?id=` + row.id);
      }
    },
    showImage(index) {
      ImagePreview({
        images: this.shopInfo.shopPhotos,
        startPosition: index,
        closeable: true,
        swipeDuration: 10,
      });
    },
    getShopInfo(id) {
      findShopById({
        id: id,
      })
        .then((res) => {
          this.shopInfo = res.data.data;
        })
        .catch(() => {
          Dialog.alert({
            title: '店铺不存在',
            message: '当前店铺不存在或者已关闭！',
          });
          // this.$router.go(-1);
        });
    },
    onLoad() {
      this.refreshing = true;
      goodsListByShopId({
        shopId: this.shopId,
      }).then((res) => {
        this.shopGoods.length = 0;
        let list = res.data.data.list;
        this.shopGoods.push(...list);
        this.finished = true;
        this.loading = false;
        this.refreshing = false;
      });
    },
  },
  components: {
    [Image.name]: Image,
    [Row.name]: Row,
    [Col.name]: Col,
    [Rate.Rate]: Rate,
    [Notify.name]: Notify,
    [Tab.name]: Tab,
    [List.name]: List,
    [Tabs.name]: Tabs,
    [Card.name]: Card,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Dialog.name]: Dialog,
    [Dialog.Component.name]: Dialog.Component,
    [ImagePreview.name]: ImagePreview,
  },
};
</script>

<style lang="scss" scoped>
.van-cell {
  padding-left: 0;
  padding-right: 0;
}
/deep/.van-cell {
  margin-left: 10px;
  margin-top: 2px;
  padding: 0;
  width: 95%;
}
.van-multi-ellipsis--l2 /deep/ {
  margin-top: 0px;
  font-size: 16px;
  line-height: 23px;
  height: 23px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1 !important;
}
.container {
  background: #fff;
}
.van-card__desc {
  margin-top: 11px;
  color: rgb(150, 151, 153);
}
.van-card__price {
  font-weight: bold;
  font-size: 16px;
  color: #f70707;
}

.header {
  padding-top: 15px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.header-container {
  width: 100%;
  display: flex;
}

.header-icon {
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  border-radius: 10px;
  background-color: #fff;
  margin: 5px 0 0 15px;
}

.header-icon .van-image {
  border: 1px solid #ff9e00;
}

.header-info {
  margin: 0 20px 0 20px;
  color: #fff;
  display: table;
  /*max-width: 70%;*/
}

.header-intro {
  color: #fff;
  margin: 10px 20px;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.header-address {
  margin-top: 10px;
  max-height: 60px;
  overflow: hidden;
}

.header-split {
  height: 1px;
  background: #fffeec;
  margin: 15px 15px 10px 15px;
}

/*.pictures{*/
/*  display: flex;*/
/*  flex-direction: row;*/
/*}*/

/*.pictures .item{*/
/*  height: 100px;*/
/*  width: 33%;*/
/*  border-radius: 8px;*/
/*  margin: 0 5px;*/
/*}*/

.product-item {
}

body,
p {
  margin: 0;
  padding: 0;
}

.pictures {
  height: 100px;
  margin: 0 10px;
  max-width: 750px;
  min-width: 320px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.pictures::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.item {
  list-style: none;
  display: inline-block;
  height: 100px;
  width: 48%;

  margin-top: 10px;
  background: #ccc;
  text-align: center;
}

.pictures .item:last-child {
  margin: 0;
}
</style>
